<template>
     <!-- label代表列名 -->
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="用户编号" width="180" />
    <el-table-column prop="name" label="名称" width="180" />
    <el-table-column prop="address" label="地址" width="320"/>
    <el-table-column prop="createTime" label="创建时间" width="260"/>
    <el-table-column label="操作" width="250">
      <template #default="scope">
          <el-button plain @click="editUserInfo">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <button @click="getTableData">点击一下</button>
</template>

<script setup>
    
  import { doGet } from '@/http/httpRequest.js'
  import { onMounted, ref } from 'vue';

  let tableData = ref ( [{}] ) 

  onMounted( () =>{
    getTableData()
  })

  function getTableData(){
    doGet("/users", {}).then(function (response){
      console.log(response.data.data);
      tableData.value = response.data.data;
      //  处理成功情况
      //this.tableData = response
    }).catch((error) => {
      console.log(error);
    }).finally(
      //  处理错误情况
        () =>{
            
        }
    )
  }

  function editUserInfo(){
      console.log("edit user");
      
  }
</script>

<style scoped>
    
</style>